
<!--功能页签start-->
<ul class="nav nav-tabs" id="attributeTab">

    <li class="active"><a href="#attrBasic">常规</a></li>

    <li><a href="#attrForm">表单</a></li>

    <li><a href="#attrPower">权限</a></li>

    <li><a href="#attrOperate">操作</a></li>

    <li id="tab_attrJudge"><a href="#attrJudge">转出条件</a></li>

    <li><a href="#attrStyle">样式</a></li>

    <li><a href="#additional">附加选项</a></li>

</ul>
<!--功能页签end-->
<!--属性设置表单start-->
<form class="form-horizontal" target="hiddeniframe" method="post" id="flow_attribute" name="flow_attribute" action="{:url('Workflowajax/save_attribute')}">
<!--<form class="form-horizontal" target="hiddeniframe" method="post" id="flow_attribute" name="flow_attribute" action="/index.php?s=index/save_attribute">-->

    <div class="tab-content">
        <!------------------------------------------------------------- attrBasic start ------------------------------------------------------------------------------------------>
        <div class="tab-pane active" id="attrBasic">

            <div class="control-group">

                <label class="control-label" for="process_name">步骤名称</label>

                <div class="controls">

                    <input type="text" id="process_name" name="process_name" placeholder="{$basic.process_name}" value="{$basic.process_name}">
                    <input type="hidden" name="id" id="id" value="{$id}">

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">步骤类型</label>

                <div class="controls">

                    <label class="radio inline">

                        <input type="radio" name="process_type" value="is_step" <?php if($basic['process_type']=='is_step') echo 'checked="checked"'; ?> >正常步骤

                    </label>

                    <label class="radio inline">

                        <input type="radio" name="process_type" value="is_start" <?php if($basic['process_type']=='is_start') echo 'checked="checked"'; ?> >开始节点

                    </label>

                    <label class="radio inline">

                        <input type="radio" name="process_type" value="is_end" <?php if($basic['process_type']=='is_end') echo 'checked="checked"'; ?> >结束节点

                    </label>

                </div>

            </div>

            <hr/>

            <div id="current_flow" style="display: none;">

                <div class="offset1">

                    <select multiple="multiple" size="6" name="process_to[]" id="process_multiple" >
                        {foreach $relevant as $v}
                        <?php if(in_array($v['id'],$basic['process_to'])){ ?>
                        <option value="{$v.id}" selected="selected">{$v.process_name}</option>
                        <?php }else{ ?>
                        <option value="{$v.id}">{$v.process_name}</option>
                        <?php } ?>
                        {/foreach}
                    </select>

                </div>

            </div>
            <!-- current_flow end -->
            <div id="end_flow" class="hide">

            </div><!-- end_flow end -->

        </div>

        <!------------------------------------------------------------- attrBasic end -------------------------------------------------------------------------------------------->

        <!------------------------------------------------------------- attrForm start ------------------------------------------------------------------------------------------->
        <div class="tab-pane" id="attrForm">
            <style>
                .testswitch {
                    position: relative;
                    float: left;
                    width: 90px;
                    margin: 0;
                    -webkit-user-select:none;
                    -moz-user-select:none;
                    -ms-user-select: none;
                }

                .testswitch-checkbox {
                    display: none!important;
                }

                .testswitch-label {
                    display: block;
                    overflow: hidden;
                    cursor: pointer;
                    border: 2px solid #999999;
                    border-radius: 20px;
                }

                .testswitch-inner {
                    display: block;
                    width: 200%;
                    margin-left: -100%;
                    transition: margin 0.3s ease-in 0s;
                }

                .testswitch-inner::before, .testswitch-inner::after {
                    display: block;
                    float: right;
                    width: 50%;
                    height: 30px;
                    padding: 0;
                    line-height: 30px;
                    font-size: 14px;
                    color: white;
                    font-family:
                            Trebuchet, Arial, sans-serif;
                    font-weight: bold;
                    box-sizing: border-box;
                }

                .testswitch-inner::after {
                    content: attr(data-on);
                    padding-left: 10px;
                    background-color: #00e500;
                    color: #FFFFFF;
                }

                .testswitch-inner::before {
                    content: attr(data-off);
                    padding-right: 10px;
                    background-color: #EEEEEE;
                    color: #999999;
                    text-align: right;
                }

                .testswitch-switch {
                    position: absolute;
                    display: block;
                    width: 22px;
                    height: 22px;
                    margin: 4px;
                    background: #FFFFFF;
                    top: 0;
                    bottom: 0;
                    right: 56px;
                    border: 2px solid #999999;
                    border-radius: 20px;
                    transition: all 0.3s ease-in 0s;
                }

                .testswitch-checkbox:checked + .testswitch-label .testswitch-inner {
                    margin-left: 0;
                }

                .testswitch-checkbox:checked + .testswitch-label .testswitch-switch {
                    right: 0px;
                }
            </style>

            <table class="table table-condensed table-bordered table-hover" >

                <tr>

                    <th style="text-align:center">字段名称</th>

                    <th style="text-align:center">控件类型</th>

                    <th style="width:100px;"><label title="本步骤可写字段"  class="checkbox"><input type="checkbox" id="write">可写字段</label></th>



                    <th style="width:100px;"><label title="保密字段对于本步骤主办人、经办人均为不可见"  class="checkbox"><input type="checkbox" id="secret">保密字段</label></th>

                </tr>

                <tbody id="fields">
                <!-- 这里是表单设计器的字段 start -->
<!--                <tr>-->

<!--                    <th><div contenteditable="true"> 爱好</div></th>-->
<!--                    <td>-->
<!--                        <select name="" id="">-->
<!--                            <option value="">文本框</option>-->
<!--                            <option value="">下拉框</option>-->
<!--                            <option value="">单选框</option>-->
<!--                            <option value="">多选框</option>-->
<!--                        </select>-->
<!--                    </td>-->

<!--                    <td><label class="checkbox"><input type="checkbox" name="write[]" checked="true" value="data_1" key="0" id="write_0"></label></td>-->

<!--                    <td><label class="checkbox"><input type="checkbox" name="secret[]" disabled="true" value="data_1" key="0" id="secret_0"></label></td>-->

<!--                </tr>-->

<!--                <tr>-->

<!--                    <th><div contenteditable="true">姓名</div></th>-->

<!--                    <td>-->
<!--                        <select name="" id="">-->
<!--                            <option value="">文本框</option>-->
<!--                            <option value="">下拉框</option>-->
<!--                            <option value="">单选框</option>-->
<!--                            <option value="">多选框</option>-->
<!--                        </select>-->
<!--                    </td>-->

<!--                    <td><label style="display: block;" ><input type="checkbox" name="write[]" checked="true" value="data_2" key="1" id="write_1"></label></td>-->

<!--                    <td><label style="display: block;"><input type="checkbox" name="secret[]" disabled="true" value="data_2" key="1" id="secret_1"></label></td>-->

<!--                </tr>-->
<!--                <tr id="add_field">-->
<!--                    <th colspan="4" style="text-align: center;" >+新增字段</th>-->
<!--                </tr>-->
                <!-- 这里是表单设计器的字段 end -->




                </tbody>

            </table>

            <script>

                //动态请求-审核用-表单字段-方法
                var get_field =function(){
                    let url = "{:url('Workflowajax/get_field')}";
                    let data = {'flow_id':{$basic.flow_id},'process_id':{$id}};
                    return ajax(url,data);
                };
                //组装审核表单--通用
                var form_field =function(res){
                    let html = '';
                    let html_option = '';
                    let html_button = "";
                        html_button+= '<tr id="add_field">';
                        html_button+= '<th colspan="4" style="text-align: center;" >+新增字段</th>';
                        html_button+= '</tr>';
                    $.each(res.data,function(k,v){
                        html += '<tr>';
                        // html += '<th><div contenteditable="true">'+v.field_name+'</div></th>';
                        html += '<th><div contenteditable="true">'+v.name+'</div></th>';
                        html += '<td>';
                        html += '<select id="field_type_'+v.id+'" onchange="selects('+v.id+')" name="field_type_'+v.id+'" >';

                        if({$is_form_extend}!==1){
                            $.each(res.msg,function(f,n){
                                if(v.field_type == n.id){
                                    html += '<option value="'+n.id+'" selected >'+n.name+'</option>';
                                }else{
                                    html += '<option value="'+n.id+'" >'+n.name+'</option>';
                                }
                            })
                        }else{
                            $.each(res.msg,function(f,n){
                                if(v.field_type == n.id){
                                    html += '<option value="'+n.id+'" selected >'+n.name+'</option>';
                                }
                            })
                        }

                        html += '</select>';
                        html += '</td>';
                        html += '<td><label style="display: block;" ><input type="checkbox" name="write[]" '+v.write+' value="data_'+v.id+'" key="'+v.id+'" id="write_'+v.id+'"></label></td>';
                        html += '<td><label style="display: block;"><input type="checkbox" name="secret[]" '+v.secret+' value="data_'+v.id+'" key="'+v.id+'" id="secret_'+v.id+'"></label></td>';
                        html += '</tr>';

                        if(v.content){
                            html += '<tr id="tr'+v.id+'">';
                            html += '<th><div>选项</div></th>';
                            html += '<td colspan="3">';
                            html += '<div id="option'+v.id+'">';
                            for(var i=0;i<v.content.length;i++){
                                html += '<input style="width:15%;margin-right:3%" value="'+v.content[i]+'" type="text" name="option_'+v.id+'[]">';
                            }
                            html += '</div>';
                            html += '<input type="button" onclick="add_option('+v.id+',\'add\')" value="新增">';
                            html += '<input type="button" onclick="add_option('+v.id+',\'delete\')" value="减少">';
                            html += '</td>';
                            html += '</tr>';
                        }
                    })
                    if({$is_form_extend}!==1){
                        html += '<tr id="add_field">';
                        html += '<th colspan="4" style="text-align: center;" ><input type="button" style="width:100%;height:100%"  onclick="add_field()" value="+新增字段"></th>';
                        html += '</tr>';
                    }
                    $.each(res.data,function(k,v){
                        html_option += '<option value="'+v.source_table+'*'+v.field_name+'">'+v.name+'</option>';
                        // html_option += '<option value="data_'+v.id+'">'+v.field_name+'</option>';
                    });
                    $(".fields").html(html_option);
                    // $('#fields').html(html_button);
                    $('#fields').html(html);
                }
                //保存-审核用-表单字段
                var savefield = function(){
                    let name = $('#add_name').html();
                    let id = $('#add_type').val();
                    let data = {'field_type':id,'field_name':name,'flow_id':{$basic.flow_id}};
                    let url= "{:url('Workflowajax/add_field')}";
                    let res = ajax(url,data);
                    let field = get_field();
                    form_field(field);
                };
                //重置字段
                var resetfield = function(){
                    let field = get_field();
                    form_field(field);
                }
                //字段选择模型
                var add_field = function(){
                    var html = '';
                    html +='<tr>';
                    html +='<th><div id="add_name" contenteditable="true">填写字段名</div></th>';
                    html +='<td>';
                    html +='<select name="" id="add_type">';
                    html +='<option value="1" selected>文本框</option>';
                    html +='<option value="2">下拉框</option>';
                    html +='<option value="3">单选框</option>';
                    html +='<option value="4">多选框</option>';
                    html +='</select>';
                    html +='</td>';
                    html +='<td><label  class="checkbox"><input type="button"  onclick="savefield()" value="确定"></label></td>';
                    html +='<td><label  class="checkbox"><input type="button" onclick="resetfield()" value="取消"></label></td>';
                    html +='</tr>';

                    $('#add_field').before(html);
                }
                /**
                 * 下拉选项值
                 */
                var selects = function(e){
                    let action = $("#field_type_"+e).val();
                    if(action == 1){
                        $("#tr"+e).remove();
                        return false;
                    }
                    $("#tr"+e).html('');
                    let html = '';
                    html += '<tr id="tr'+e+'">';
                    html += '<th><div>选项</div></th>';
                    html += '<td colspan="3">';
                    html += '<div id="option'+e+'">';
                    for(var i=0;i<4;i++){
                        html += '<input style="width:15%;margin-right:3%" type="text" name="option_'+e+'[]">';
                    }
                    html += '</div>';
                    html += '<input type="button" onclick="add_option('+e+',\'add\')" value="新增">';
                    html += '<input type="button" onclick="add_option('+e+',\'delete\')" value="减少">';
                    html += '</td>';
                    html += '</tr>';
                    $("#field_type_"+e).parents('tr').after(html);
                }
                /**
                 * 增加选择项
                 */
                var add_option = function(e,n){
                    let i = $("input[name='option_"+e+"[]']").size();

                    if(n == 'add'){
                        let html = '<input style="width:15%;margin-right:3%" type="text" name="option_'+e+'[]">';
                        $('#option'+e+' input:eq('+(i-1)+')').before(html);
                    }else if(n == 'delete'){
                        if(i == 1){
                            $('#tr'+e).remove();
                        }
                        $('#option'+e+' input:eq('+(i-1)+')').remove();
                    }
                }
                //获取初始化样式
                var get_style = function(){
                    let url= "{:url('Workflowajax/get_style')}";
                    let param = {'process_id':{$id}};
                    let data = ajax(url,param);
                    $('#style_width').val(data.data.width);
                    $('#style_height').val(data.data.height);
                    $('#style_color').val(data.data.color);
                    $('#style_icon').val(data.data.icon);
                }


            </script>






        </div>
        <!------------------------------------------------------------- attrForm end --------------------------------------------------------------------------------------------->

        <!------------------------------------------------------------- attrPower start ------------------------------------------------------------------------------------------>
        <div class="tab-pane" id="attrPower">



            <div class="control-group">

                <label class="control-label" >自动选人</label>

                <div class="controls">

                    <select name="auto_person" id="auto_person_id">
                        {foreach $auto_person as $v}

                        <option value="{$v.id}" <?php if($basic['auto_person'] == $v['id']) { echo 'selected="selected"'; }; ?> >{$v.name}</option>
                        {/foreach}

                    </select>

                    <span class="help-inline">预先设置自动选人，更方便转交工作</span>

                </div>

                <div class="controls hide" id="auto_unlock_id" >

                    <label class="checkbox">

                        <input type="checkbox" name="auto_unlock" value="1"  <?php if($basic['auto_unlock'] == 1) { echo 'checked="checked"'; }; ?> >允许委托  --强制会审时，不允许委托

                    </label>

                </div>



                <div id="auto_person_4" class="hide">

                    <h4>授权范围</h4>

                    <div class="control-group">

                        <label class="control-label">授权人员</label>

                        <div class="controls">
                            <!--                    <input type="text"  placeholder="选择人员" name="range_user_ids"> <a href="javascript:void(0);">选择</a>-->
                            <div id="range_user_ids" style="width:300px;"></div>
                        </div>

                    </div>



                    <div class="control-group form-inline">

                        <label class="control-label">授权部门</label>

                        <div class="controls">

                            <div  id="range_dept_ids" style="width:300px;"></div>

                            <div  style="float:left;">

                                <input type="checkbox" name="is_head" value="1"  <?php if($basic['is_head'] == 1) { echo 'checked ="checked"'; }; ?> > 是否部门主管

                            </div>

                        </div>

                    </div>



                    <div class="control-group">

                        <label class="control-label">授权角色</label>

                        <div class="controls">
                            <!--                    <input type="text" id="range_role_ids" placeholder="选择角色" name="range_role_ids"> <a href="javascript:void(0);">选择</a>-->
                            <div id="range_role_ids" style="width:300px;"></div>
                        </div>

                    </div>

                </div>


            </div>

            <hr/>







            <div class="control-group">

                <div class="controls">

                    <span class="help-block">当需要手动选人时，则授权范围生效</span>

                </div>

            </div>






        </div>
        <!------------------------------------------------------------- attrPower end -------------------------------------------------------------------------------------------->
        <!------------------------------------------------------------- attrOperate start ---------------------------------------------------------------------------------------->
        <div class="tab-pane" id="attrOperate">



<!--            <div class="control-group">-->

<!--                <label class="control-label" >交接方式</label>-->

<!--                <div class="controls">-->

<!--                    <select name="process_mode" >-->

<!--                        <option value="0">明确指定主办人</option>-->

<!--                        <option value="1">先接收为主办人</option>-->

<!--                    </select>-->

<!--                </div>-->

<!--            </div>-->



<!--            <div class="control-group">-->

<!--                <div class="controls">-->

<!--                    <label class="checkbox">-->

<!--                        <input type="checkbox" name="agent_pass" value="is_step">经办人可以转交下一步-->

<!--                    </label>-->

<!--                </div>-->

<!--            </div>-->

<!--            <hr/>-->



            <div class="control-group">

                <label class="control-label" >会签方式</label>

                <div class="controls">

                    <select name="con_sign" >
                        {foreach $con_sign as $v}
                        <option value="{$v.id}" {if condition="$basic.con_sign eq $v.id"} selected {/if} >{$v.name}</option>
                        {/foreach}

                    </select>

                    <span class="help-inline">如果设置强制会签，则本步骤全部人都会签后才能转交或办结</span>

                </div>

            </div>



            <div class="control-group">

                <label class="control-label" >可见性</label>

                <div class="controls">

                    <select name="con_sign_vsb" >
                        {foreach $con_sign_vsb as $v}
                            <option value="{$v.id}" {if condition="$basic.con_sign_vsb eq $v.id"} selected {/if} >{$v.name}</option>
                        {/foreach}
                    </select>

                </div>

            </div>





            <hr/>



            <div class="control-group">

                <label class="control-label" >回退方式</label>

                <div class="controls">

                    <select name="con_sign_back" >

                        {foreach $con_sign_back as $v}
                        <option value="{$v.id}" {if condition="$basic.con_sign_back eq $v.id"} selected {/if} >{$v.name}</option>
                        {/foreach}

                    </select>

                </div>

            </div>





        </div>

        <!------------------------------------------------------------- attrOperate end ------------------------------------------------------------------------------------------>

        <!------------------------------------------------------------- attrJudge start ------------------------------------------------------------------------------------------>
        <div class="tab-pane" id="attrJudge">





            <table class="table" >

                <thead>

                <tr>

                    <th style="width:100px;">转出步骤</th>

                    <th>转出条件设置</th>

                </tr>

                </thead>

                <tbody>





                <tr id="tpl" class="hide">

                    <td style="width: 100px;">@text</td>

                    <td>

                        <table class="table table-condensed">

                            <tbody>

                            <tr>

                                <td>

                                    <select class="fields" id="field_@a" class="input-medium">

                                        <option value="">选择字段</option>

                                        <!-- 表单字段 start -->

                                        <option value="data_1">爱好</option>

                                        <option value="data_2">姓名</option>

                                        <!-- 表单字段 end -->

                                    </select>

                                    <select id="condition_@a" class="input-small">

                                        <option value="=">等于</option>

                                        <option value="&lt;&gt;">不等于</option>

                                        <option value="&gt;">大于</option>

                                        <option value="&lt;">小于</option>

                                        <option value="&gt;=">大于等于</option>

                                        <option value="&lt;=">小于等于</option>

                                        <option value="include">包含</option>

                                        <option value="exclude">不包含</option>

                                    </select>

                                    <input type="text" id="item_value_@a" class="input-small">

                                    <select id="relation_@a" class="input-small">

                                        <option value="AND">与</option>

                                        <option value="OR">或者</option>

                                    </select>

                                </td>

                                <td>

                                    <div class="btn-group">

                                        <button type="button" class="btn btn-small" onclick="fnAddLeftParenthesis('@a')">（</button>

                                        <button type="button" class="btn btn-small" onclick="fnAddRightParenthesis('@a')">）</button>

                                        <button type="button" onclick="fnAddConditions('@a')" class="btn btn-small">新增</button>

                                    </div>

                                </td>

                            </tr>

                            <tr>

                                <td>

                                    <select id="conList_@a" multiple="" style="width: 100%;height: 80px;"></select>

                                </td>

                                <td>

                                    <div class="btn-group">

                                        <button type="button" onclick="fnDelCon('@a')" class="btn btn-small">删行</button>

                                        <button type="button" onclick="fnClearCon('@a')" class="btn btn-small">清空</button>

                                    </div>

                                </td>

                            </tr>

                            <tr>

                                <td>

                                    <input id="process_in_desc_@a" type="text" name="process_in_desc_@a" style="width:98%;">

                                    <input name="process_in_set_@a" id="process_in_set_@a" type="hidden">

                                </td>

                                <td>

                                    <span class="xc1">不符合条件时的提示</span>

                                </td>

                            </tr>

                            </tbody>

                        </table>

                    </td>

                </tr>





                </tbody>

                <tbody id="ctbody">



                </tbody>

            </table>

            <input type="hidden" name="process_condition" id="process_condition">


        </div>
        <!------------------------------------------------------------- attrJudge end -------------------------------------------------------------------------------------------->
        <!------------------------------------------------------------- attrStyle start ------------------------------------------------------------------------------------------>
        <div class="tab-pane" id="attrStyle">

            <div class="control-group">

                <label class="control-label" for="process_name">尺寸</label>

                <div class="controls">

                    <input type="text" class="input-small" name="style_width" id="style_width" placeholder="宽度PX"> X <input type="text" class="input-small" name="style_height" id="style_height" placeholder="高度PX">

                </div>

            </div>

            <div class="control-group">

                <label class="control-label" for="process_name">字体颜色</label>

                <div class="controls">

                    <input type="text" class="input-small" name="style_color" id="style_color" placeholder="#000000">

                    <div class="colors" org-bind="style_color">

                        <ul>

                            <li class="Black active" org-data="#000" title="Black">1</li>

                            <li class="red" org-data="#d54e21" title="Red">2</li>

                            <li class="green" org-data="#78a300" title="Green">3</li>

                            <li class="blue" org-data="#0e76a8" title="Blue">4</li>

                            <li class="aero" org-data="#9cc2cb" title="Aero">5</li>

                            <li class="grey" org-data="#73716e" title="Grey">6</li>

                            <li class="orange" org-data="#f70" title="Orange">7</li>

                            <li class="yellow" org-data="#fc0" title="Yellow">8</li>

                            <li class="pink" org-data="#ff66b5" title="Pink">9</li>

                            <li class="purple" org-data="#6a5a8c" title="Purple">10</li>

                        </ul>

                    </div>



                </div>

            </div>

            <div class="control-group">

                <label class="control-label" for="process_name"><span class="process-flag badge badge-inverse"><i class="icon-star-empty icon-white" id="style_icon_preview"></i></span> 图标</label>

                <div class="controls">

                    <input type="text" class="input-medium" name="style_icon" id="style_icon" placeholder="icon">

                    <div class="colors" org-bind="style_icon">

                        <ul>

                            <li class="Black active" org-data="icon-star-empty" title="Black"><i class="icon-star-empty icon-white"></i></li>

                            <li class="red" org-data="icon-ok" title="Red"><i class="icon-ok icon-white"></i></li>

                            <li class="green" org-data="icon-remove" title="Green"><i class="icon-remove icon-white"></i></li>

                            <li class="blue" org-data="icon-refresh" title="Blue"><i class="icon-refresh icon-white"></i></li>

                            <li class="aero" org-data="icon-plane" title="Aero"><i class="icon-plane icon-white"></i></li>

                            <li class="grey" org-data="icon-play" title="Grey"><i class="icon-play icon-white"></i></li>

                            <li class="orange" org-data="icon-heart" title="Orange"><i class="icon-heart icon-white"></i></li>

                            <li class="yellow" org-data="icon-random" title="Yellow"><i class="icon-random icon-white"></i></li>

                            <li class="pink" org-data="icon-home" title="Pink"><i class="icon-home icon-white"></i></li>

                            <li class="purple" org-data="icon-lock" title="Purple"><i class="icon-lock icon-white"></i></li>

                        </ul>

                    </div>

                </div>

            </div>


            <!-- 不太完善，隐藏

                     <div class="control-group">

                      <label class="control-label">CSS3 图形</label>

                      <div class="controls">

                        <select name="style_graph" id="style_graph">

                          <option value="">矩形</option>

                          <option value="circle">圆形</option>

                          <option value="oval">椭圆</option>

                          <option value="hexagon">菱形</option>

                        </select>

                        <span class="help-inline">CSS3仅支持部分浏览器</span>

                      </div>

                    </div> -->


        </div>
        <!------------------------------------------------------------- attrStyle end -------------------------------------------------------------------------------------------->

        <div class="tab-pane" id="additional">

            <div class="control-group">

                <label class="control-label">是否需要评论</label>

                <div class="controls">

                    <input type="checkbox" name="is_comment" value="1"  <?php if($basic['is_comment'] == 1) { echo 'checked ="checked"'; }; ?> >

                </div>

            </div>
            <div class="control-group">

                <label class="control-label">是否可以上传附件</label>

                <div class="controls">

                    <input type="checkbox" name="is_upload" value="1"  <?php if($basic['is_upload'] == 1) { echo 'checked ="checked"'; }; ?> >

                </div>

            </div>

        </div>

    </div>





    <div>

        <hr/>

        <span class="pull-right">

      <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">取消</a>

      <button class="btn btn-primary"  type="submit" id="attributeOK">确定保存</button>

  </span>

    </div>

</form>
<!--属性设置表单end-->
<iframe id="hiddeniframe" style="display: none;" name="hiddeniframe"></iframe>

<script src="__SKIN__/js/layui/xm-select.js"></script>
<script>
        //授权人员下拉
            xmSelect.render({
                el:'#range_user_ids',
                name:'range_user_ids',
                toolbar: {show: true},
                data: function(){
                    let  url = "{:url('Workflowajax/get_users')}";
                    let  param = {'id':{$id},'str':'range_user_ids'};
                    let  data = ajax(url,param);
                    return data.msg;
                },
                paging: true,
                pageSize: 5,
                filterable: true,
            });
        //授权角色下拉
            xmSelect.render({
                el:'#range_role_ids',
                name:'range_role_ids',
                toolbar: {show: true},
                data: function(){
                    let  url = "{:url('Workflowajax/get_roles')}";
                    let  param = {'id':{$id},'str':'range_role_ids'};
                    let  data = ajax(url,param);
                    return data.msg;
                },
                paging: true,
                pageSize: 5,
                filterable: true,
            });

        //授权部门下拉
            xmSelect.render({
                el:'#range_dept_ids',
                name:'range_dept_ids',
                toolbar: {show: true},
                data: function(){
                    let  url = "{:url('Workflowajax/get_depts')}";
                    let  param = {'id':{$id},'str':'range_dept_ids'};
                    let  data = ajax(url,param);
                    return data.msg;
                },
                paging: true,
                pageSize: 5,
                filterable: true,
            });


</script>

<script type="text/javascript">

    var flow_id = {$basic.flow_id};//流程ID

    var process_id = {$id};//步骤ID

    // var get_con_url = "/index.php?s=/index/get_con";//获取条件

    var get_con_url = "{:url('Workflowajax/get_con')}";//获取条件



    /*确定保存时调用的方式*/

    function saveAttribute(msg)

    {

        $("#attributeModal").modal("hide");

        location.reload();

    }

    //同步ajax请求数据转出
    var ajax = function(url,data){
        var arr = {};
        $.ajax({
            url:url,
            type:'post',
            data:data,
            dataType:"html",
            async: false,//关闭异步
            success:function(data){
                arr = eval('(' + data + ')');
            }
        });
        return arr;
    }


    //-----条件设置--strat----------------
    /**
     *通过ID返回对应的dom对象
     */
    function _id(id) {

        return !id ? null : document.getElementById(id);

    }
    /**
     * 去空格方法
     * */
    function trim(str) {

        return (str + '').replace(/(\s+)$/g, '').replace(/^\s+/g, '');

    }
    /**
     * 检查公式（内容括号是否成对）
     */
    function fnCheckExp(text){



        if( text.indexOf("(")>=0 ){

            var num1 = text.split("(").length;

            var num2 = text.split(")").length;

            if( num1!=num2 ) {

                return false;

            }

        }

        return true;

    }

    /**

     * 增加左括号表达式，会断行

     */

    function fnAddLeftParenthesis(id){

        var oObj = _id('conList_' + id);

        var current = 0;

        if(oObj.options.length>0){ //检查是否有条件

            for ( var i = 0;i < oObj.options.length;i++ ){

                if( oObj.options[i].selected ) {

                    current = oObj.selectedIndex;

                    break;

                }

            }

            if(current==0){

                current = oObj.options.length-1;

            }

        } else { //有条件才能添加左括号表达式

            alert("请先添加条件，再选择括号");

            return;

        }

        var sText = oObj.options[current].text;

        //已经有条件的话

        if( (trim(sText).substr(-3,3) == 'AND') || (trim(sText).substr(-2,2) == 'OR') ){

            alert("无法编辑已经存在关系的条件");

            return;

        }

        var sRelation = _id('relation_'+id).value;

        if( sText.indexOf('(')>=0 ){

            if( !fnCheckExp(sText) ){

                alert("条件表达式书写错误,请检查括号匹配");

                return;

            } else {

                sText = sText + " " + sRelation;

            }

        } else {

            sText = sText + " " + sRelation;

        }

        oObj.options[current].text = sText;

        // $('#conList_'+id+' option').eq(current).text(sText)

        $('#conList_'+id).append('<option value="( ">( </option>');



        /* var oMyop = document.createElement('option');

         oMyop.text = "( ";

         var nPos = oObj.options.length;

         oObj.appendChild(oMyop,nPos);*/



    }

    /**

     * 增加右括号表达式

     */

    function fnAddRightParenthesis(id){

        var oObj = _id('conList_' + id);

        var current = 0;

        if( oObj.options.length>0 ){

            for ( var i = 0;i < oObj.options.length;i++ ){

                if( oObj.options[i].selected ) {

                    current = oObj.selectedIndex;

                    break;

                }

            }

            if( current == 0 ){

                current = oObj.options.length-1;

            }

        } else {

            alert("请先添加条件，再选择括号");

            return;

        }

        var sText = oObj.options[current].text;

        if( (trim(sText).substr(-3,3)=='AND') || (trim(sText).substr(-2,2)=='OR') ){

            alert("无法编辑已经存在关系的条件");

            return;

        }

        if( (trim(sText).length==1) ){

            alert("请添加条件");

            return;

        }

        if( !fnCheckExp(sText) ){

            sText = sText + ")";

        }

        oObj.options[current].text = sText;

    }

    /**
     *新增条件
     */
    function fnAddConditions(id){

        var sField = $('#field_'+id).val(),sField_text = $('#field_'+id).find('option:selected').text(),sCon = $('#condition_'+id).val(),sValue = $('#item_value_'+id).val();

        var bAdd = true;

        if( sField!=='' && sCon!=='' && sValue!=='' ){

            var oObj = _id('conList_'+id);



            if( oObj.length>0 ){

                alert('暂只支持单一条件');
                return false;

                var sLength = oObj.options.length;

                var sText = oObj.options[sLength-1].text;

                if(!fnCheckExp(sText)){

                    bAdd = false;

                }

            }

            if( sValue.indexOf("'")>=0 ){

                alert("值中不能含有'号");

                return;

            }

            var sNewText = "'" + sField + "' " + sCon + " '" + sValue + "'";

            var sNewText_text = "'" + sField_text + "' " + sCon + " '" + sValue + "'";

            for( var i=0;i<oObj.options.length;i++ ){

                //检查select中option的value的值是否重复 field_name+'='+value
                if( oObj.options[i].value.indexOf(sNewText)>=0 ){

                    alert("条件重复");

                    return;

                }

            }



            var sRelation = $('#relation_'+id).val();  //获取条件关系 AND|OR



            if( bAdd ){

                //var oMyop = document.createElement('option');

                var nPos = oObj.options.length;

                //oMyop.text = sNewText_text;

                // oMyop.value = sNewText;

                //oObj.appendChild(oMyop,nPos);

                $('#conList_'+id).append('<option selected value="'+sNewText+'">'+sNewText_text+'</option>');

                if( nPos>0 ){

                    oObj.options[nPos-1].text += "  " + sRelation;

                    oObj.options[nPos-1].value += "  " + sRelation;

                }

            } else {

                //括号不对时走这里

                if( trim(oObj.options[sLength-1].text).length==1 ){

                    oObj.options[sLength-1].text += sNewText_text;

                    oObj.options[sLength-1].value += sNewText;

                } else {

                    oObj.options[sLength-1].text += " " + sRelation + " " + sNewText_text;

                    oObj.options[sLength-1].value += " " + sRelation + " " + sNewText;

                }

            }

        } else {

            alert("请补充完整条件");

            return;

        }

    }
    /**
     * 转出条件删行
     */
    function fnDelCon(id){

        var oObj = _id('conList_'+id);

        var maxOpt = oObj.options.length;

        if(maxOpt<0) maxOpt = 0;

        for (var i = 0;i < oObj.options.length;i++ ){

            if( oObj.options[i].selected ) {

                if((i+1)==maxOpt){

                    if(typeof oObj.options[i-1] !== 'undefined'){

                        oObj.options[i-1].text = oObj.options[i-1].text.replace(/(AND|OR)$/,'');

                        oObj.options[i-1].value = oObj.options[i-1].value.replace(/(AND|OR)$/,'');

                    }

                }

                oObj.removeChild(oObj.options[i]);

                i--;

            }

        }

    }

    /**
     *清空条件
     */
    function fnClearCon(id){

        $('#conList_' + id).html('');

    }







    //根据基本信息的下一步骤，设置《条件设置》tab的条件列表

    function fnSetCondition(){

        if($("#process_multiple option").length<=0)

        {

            $('#tab_attrJudge').hide();

        }else

        {

            var ids = '';

            $('#ctbody').html('');

            $('#tab_attrJudge').show();

            $("#process_multiple option").each(function(){

                if($(this).val()>0 && $(this).attr("selected"))

                {

                    var id = $(this).val(),

                        text=$(this).text(),

                        node = $('#tpl').html();



                    var s = node.replace(/\@a/g,id);

                    if(id!=0){

                        text = '<span class="badge badge-inverse">' +id+'</span><br/>' +text;

                    }

                    s = s.replace(/\@text/g,text);

                    s = "<tr>"+s+"<tr>";

                    $('#ctbody').append(s);

                    ids += id +',';

                    //flow_id 是流程设计的ID，  process_id 是步骤ID

                    if(get_con_url)

                    {

                        //var get_con_url = "/index.php?s=/index/get_con/flow_id/62/process_id/"+id+".html";

                        $.post(get_con_url,{"flow_id":flow_id,"process_id":process_id},function(data){

                            $.each(data.data,function(i,n){

                                if(i==id && _id('conList_'+i )){
                                    let option = "";
                                    $.each(n.option,function(k,v){
                                        option += '<option value="'+v.value+'">'+v.html+'</option>';
                                    })
                                    $('#conList_'+i).append(option);
                                    $('#process_in_desc_'+i).val(n.desc);
                                }
                            })

                        },'json');

                    }

                }

            });

            if(ids)

            {

                $("#process_condition").val(ids);

            }



        }

    }





    //-----条件设置--end----------------
    //权限页签内联动js
    var auto_person_id = function(apid){
        if(apid>0)

        {

            $('#auto_unlock_id').show();

        }else

        {

            $('#auto_unlock_id').hide();

        }

        if(apid==1)//指定用户

        {
            $("#auto_person_4").show();

        }else

        {

            $("#auto_person_4").hide();

        }
    }




    $(function(){

        let field = get_field();
        form_field(field);
        get_style();

        //TAB

        $('#attributeTab a').click(function (e) {

            e.preventDefault();

            $(this).tab('show');

            if($(this).attr("href")=='#attrJudge')

            {

                //加载下一步数据 处理 决策项目

            }

        })



        //步骤类型

        // $('input[name="process_type"]').on('click',function(){
        //
        //
        //
        //     if($(this).val()=='is_end')
        //
        //     {
        //
        //         $('#current_flow').hide();
        //
        //         $('#end_flow').show();
        //
        //     }else
        //
        //     {
        //
        //         $('#current_flow').show();
        //
        //         $('#end_flow').hide();
        //
        //     }
        //
        // });

        //返回步骤

        $('input[name="child_after"]').on('click',function(){



            if($(this).val()==2)

            {

                $("#child_back_id").show();

            }else

            {

                $("#child_back_id").hide();

            }

        });


        //权限初始项目
        let option = $('#auto_person_id option:selected').val();
        auto_person_id(option);


        //权限预设变更监控

        $("#auto_person_id").on('change',function(){

            var apid = $(this).val();

            auto_person_id(apid);

        });


        /*---------表单字段 start---------*/

        //可写字段

        function write_click(e){

            var id = $(e).attr('key');

            if(!$(e).attr('disabled')){

                if($(e).attr('checked')){

                    $('#secret_'+id).attr({'disabled':true,'checked':false});

                } else {

                    $('#secret_'+id).removeAttr('disabled').attr('checked',false);

                }

            }

        }

        //保密字段

        function secret_click(e){

            var id = $(e).attr('key');


            if(!$(e).attr('disabled')){

                if($(e).attr('checked')){

                    $('#write_'+id).attr({'disabled':true,'checked':false});

                } else {

                    $('#write_'+id).removeAttr('disabled').attr('checked',false);

                }

            }

        }

        //checkbox全选及反选操作

        function icheck(ac,op){

            if(ac=='write'){

                $("input[name='write[]']").each(function(){

                    if(this.disabled !== true){

                        this.checked = op;

                    }

                    write_click(this);

                })

            } else if(ac == 'secret') {

                $("input[name='secret[]']").each(function(){

                    if(this.disabled !== true){

                        this.checked = op;

                    }

                    secret_click(this);

                })

            }

        }



        $('#write').click(function(){

            if($(this).attr('checked')){

                icheck('write',true);

                $('#secret').attr({'disabled':true,'checked':false});

                $('#check').attr('checked',false).removeAttr('disabled');

            } else {

                icheck('write',false);

                $('#secret').attr('checked',false).removeAttr('disabled');

                $('#check').attr({'disabled':true,'checked':false});

            }

        });

        $('#secret').click(function(){

            if($(this).attr('checked')){

                icheck('secret',true)

                $('#write').attr({'disabled':true,'checked':false});

            } else {

                icheck('secret',false);

                $('#write').attr('checked',false).removeAttr('disabled');

            }

        });



        $("input[name='write[]']").live('click',function(){
            write_click(this);

            $('#write').removeAttr('disabled');

            if($('#write').attr('checked')==true){

                $('#write').attr('checked',false)

            }

        });

        $("input[name='secret[]']").live('click',function(){

            secret_click(this);

            $('#secret').removeAttr('disabled');

            if($('#secret').attr('checked')==true){

                $('#secret').attr('checked',false)

            }

        })

        /*---------表单字段 end---------*/



        /*样式*/

        $('.colors li').click(function() {

            var self = $(this);

            if (!self.hasClass('active')) {

                self.siblings().removeClass('active');

            }

            var color = self.attr('org-data') ? self.attr('org-data') : '';



            var parentDiv = self.parents(".colors");

            var orgBind = parentDiv.attr("org-bind");

            if(orgBind == 'style_icon')

            {

                /*$("#"+orgBind).css({ color:'#fff',background: color });*/

                $("#"+orgBind).val(color);

                $("#style_icon_preview").attr("class",color + " icon-white");

            }else//颜色

            {

                $("#"+orgBind).css({ color:'#fff',background: color });

                $("#"+orgBind).val(color);

            }

            self.addClass('active');

        });


        //条件设置

        fnSetCondition();

        //表单提交前检测

        $("#flow_attribute").submit(function(data){

            //条件检测

            var cond_data  = $("#process_condition").val();

            if( cond_data !== ''){

                var pcarr = cond_data.split(',');

                for( var i = 0;i < pcarr.length;i++ ){

                    if( pcarr[i]!=='' ){

                        var obj = _id('conList_'+pcarr[i]);

                        if(obj.length>0){

                            var constr = '';

                            for( var j=0;j<obj.options.length;j++){

                                constr += obj.options[j].value+'\n';

                                if(!fnCheckExp(constr)){

                                    alert("条件表达式书写错误,请检查括号匹配");

                                    $('#condition').click();

                                    return false;

                                }

                            }

                            _id('process_in_set_'+pcarr[i]).value = constr;

                        } else {

                            _id('process_in_set_'+pcarr[i]).value = '';

                        }

                    }

                }

            }
            $.ajax({ type: 'POST', data: $(this).serialize(), url: "{:url('Workflowajax/save_attribute')}",
                success: function (data) {
                    if(data.code == 1){
                        alert(data.msg);
                    }else{
                        alert(data.msg);
                    }
                    $("#attributeModal").modal('hide');

                },
                error: function (xhr) {
                    //...
                }
            });
            return false;



        });





    })

</script>
